{% extends "base.html" %}

{% macro talk_posts(pages) %}
    <div class="talks-grid">
        {%- for page in pages %}
            <div class="talk-card">
                <!-- Either link to the video or to the static page  -->
                {% if page.extra.video.link %}
                    {% set video_link = page.extra.video.link %}
                {% elif page.extra.link_to %}
                    {% set video_link = page.extra.link_to %}
                {% else %}
                    {% set video_link = page.permalink | safe %}
                {% endif %}

                <a class="talk-video" href="{{ video_link }}" target="_blank" rel="noopener">
                    <div class="talk-video">
                        {% if page.extra.video.thumbnail %}
                            <!-- TODO: Add srcset -->
                            {% set image = resize_image(path=page.extra.video.thumbnail, width=640, height=360, format="avif") %}
                            <img class="talk-image"
                                loading="lazy"
                                decoding="async"
                                sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
                                alt="{{ page.extra.video.thumbnail.alt | default(value='Thumbnail for the talk') }}"
                                src="{{ image.url }}" />
                            <div class="video-play-btn">
                                <div class="rounded-btn">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" stroke="currentColor" clip-rule="evenodd" d="M8.00625 2.80243C8.0182 2.8104 8.03019 2.81839 8.04222 2.82642L18.591 9.8589C18.8962 10.0623 19.1792 10.251 19.3965 10.4263C19.6234 10.6092 19.8908 10.8629 20.0447 11.234C20.2481 11.7245 20.2481 12.2758 20.0447 12.7663C19.8908 13.1374 19.6234 13.391 19.3965 13.574C19.1792 13.7493 18.8962 13.9379 18.591 14.1413L8.00628 21.1978C7.63319 21.4465 7.29772 21.6702 7.01305 21.8245C6.72818 21.9789 6.33717 22.1553 5.8808 22.128C5.29705 22.0932 4.75779 21.8046 4.40498 21.3382C4.12916 20.9736 4.05905 20.5504 4.02949 20.2278C3.99994 19.9053 3.99997 19.5021 4 19.0537L4 4.98975C4 4.97529 4 4.96087 4 4.9465C3.99997 4.49811 3.99994 4.09491 4.02949 3.77249C4.05905 3.44983 4.12916 3.02663 4.40498 2.66202C4.75779 2.19565 5.29705 1.90705 5.8808 1.87219C6.33717 1.84494 6.72818 2.02135 7.01305 2.17573C7.29771 2.33 7.63317 2.55368 8.00625 2.80243Z" fill="currentColor"></path></svg>
                                </div>
                            </div>
                        {% else %}
                            {% set image = resize_image(path='images/talks/default.webp', width=480, height=270, format="avif", quality=10) %}
                            <img class="talk-image" alt="Placeholder image for the talk" src="{{ image.url }}" />
                        {% endif %}

                    </div>
                </a>

                <div class="talk-info">
                    <h1 class="talk-title">
                        {% if page.extra.link_to %}
                            <a href={{ page.extra.link_to }}>{{ page.title }}</a>
                        {% elif page.extra.video.link %}
                            <a href={{ page.extra.video.link }}>{{ page.title }}</a>
                        {% else %}
                            <a href={{ page.permalink | safe }}>{{ page.title }}</a>
                        {% endif %}

                    </h1>

                    <div class="talk-description">
                        {% if page.description %}{{ page.description | truncate(length=300) }}{% endif %}
                    </div>

                    <!-- Filler element to keep the .meta at the bottom -->
                    <div style="flex-grow: 1;"></div>

                    <div class="meta">
                        {%- if page.date and page.extra.show_date | default(value=false) %}
                            <span class="meta-item">
                                {{ page.date | date(format="%Y-%m-%d") }}
                            </span>
                        {% endif -%}

                        {% if page.extra.organizer.name and page.extra.organizer.link %}
                            <a class="meta-item organizer" href="{{ page.extra.organizer.link }}" target="_blank" rel="noopener">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-zinc-400"><path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 2C9.87827 2 7.84344 2.84285 6.34315 4.34315C4.84285 5.84344 4 7.87827 4 10C4 11.892 4.402 13.13 5.5 14.5L12 22L18.5 14.5C19.598 13.13 20 11.892 20 10C20 7.87827 19.1571 5.84344 17.6569 4.34315C16.1566 2.84285 14.1217 2 12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>

                                {{ page.extra.organizer.name }}
                            </a>
                        {% endif %}

                        {% if page.extra.slides %}
                        <a class="meta-item slides-link" href="{{ page.extra.slides }}" target="_blank" rel="noopener">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"><path d="M5 7C5 6.46957 5.21071 5.96086 5.58579 5.58579C5.96086 5.21071 6.46957 5 7 5H17C17.5304 5 18.0391 5.21071 18.4142 5.58579C18.7893 5.96086 19 6.46957 19 7V17C19 17.5304 18.7893 18.0391 18.4142 18.4142C18.0391 18.7893 17.5304 19 17 19H7C6.46957 19 5.96086 18.7893 5.58579 18.4142C5.21071 18.0391 5 17.5304 5 17V7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8 12H16M12 8V16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                            Slides
                        </a>
                        {% endif %}

                        {% if page.extra.code %}
                            <a class="meta-item code-link" href="{{ page.extra.code }}" target="_blank" rel="noopener">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"><path d="M16 18L22 12L16 6M8 6L2 12L8 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                               Code
                            </a>
                        {% endif %}

                        {% if page.draft %}<span class="draft-label">DRAFT</span>{% endif %}
                    </div>

                </div>
            </div>

        {% endfor -%}
    </div>
{% endmacro talk_posts %}

{% block main_content %}
    {% if section.extra.section_path -%}
        {% set section = get_section(path=section.extra.section_path) %}
    {% endif -%}

    {{ post_macros::page_header(title=section.title) }}

    <main>
        {%- if paginator %}
            {%- set show_pages = paginator.pages -%}
        {% else %}
            {%- set show_pages = section.pages -%}
        {% endif -%}

        {{ self::talk_posts(pages=show_pages) }}
    </main>

    {% if paginator %}
        <ul class="pagination">
            {% if paginator.previous %}
                <span class="page-item page-prev">
                    <a href={{ paginator.previous }} class="page-link" aria-label="Previous"><span aria-hidden="true">← Prev</span></a>
                </span>
            {% endif %}

            {% if paginator.next %}
                <span class="page-item page-next">
                    <a href={{ paginator.next }} class="page-link" aria-label="Next"><span aria-hidden="true">Next →</span></a>
                </span>
            {% endif %}
        </ul>
    {% endif %}
{% endblock main_content %}
